feat: add gemini-nano-dev skill for Chrome built-in AI by fauzan171 · Pull Request #43 · google-gemini/gemini-skills

fauzan171 · 2026-04-30T19:13:56Z

Description

Add a comprehensive skill for building web applications and Chrome Extensions using Chrome's built-in AI powered by Gemini Nano (on-device model).

Fixes #17

Changes

New: `skills/gemini-nano-dev/SKILL.md`

A complete skill covering all Chrome built-in AI APIs:

Prompt API (LanguageModel) — General-purpose text generation with system prompts, conversation history, and response prefixes
Multimodal input — Image understanding (Blob, HTMLImageElement, HTMLCanvasElement, etc.) and audio understanding (AudioBuffer, ArrayBuffer, Blob)
Structured output — JSON Schema-constrained responses via responseConstraint
Session management — Context window tracking, overflow handling, cloning, and destroying sessions
Specialized APIs:
- Summarizer API — One-click text summarization
- Writer API — Purpose-driven text generation
- Rewriter API — Rewrite text with different tone/length
- Proofreader API — Grammar and spelling correction
- Language Detector API — Detect input language
- Translator API — On-device translation
Chrome Extensions — Extension-specific guidance including model parameters (topK, temperature)
Localhost setup — Chrome flags for development
Best practices — 10 actionable tips for production use

Modified: `README.md`

Added gemini-nano-dev to the skills table.

Testing

Skill follows the same format and conventions as existing skills (gemini-api-dev, gemini-live-api-dev, gemini-interactions-api)
All code examples are based on official Chrome developer documentation
Frontmatter includes proper name and description fields

Add a comprehensive skill for building web applications and Chrome Extensions using Chrome's built-in AI powered by Gemini Nano. The skill covers: - Prompt API (LanguageModel) for text generation - Multimodal input (image and audio understanding) - Structured output with JSON Schema constraints - Session management (context window, cloning, destroying) - Specialized APIs: Summarizer, Writer, Rewriter, Proofreader, Language Detector, and Translator - Chrome Extensions integration - Hardware requirements and localhost setup - Best practices for on-device AI development Also updates README.md to include the new skill in the skills table. Fixes google-gemini#17

gemini-code-assist

Code Review

This pull request introduces the gemini-nano-dev skill, providing comprehensive documentation and code examples for building web applications and Chrome Extensions using Chrome's built-in AI (Gemini Nano). The documentation covers the Prompt API, multimodal inputs, structured outputs, and specialized APIs like Summarizer and Translator. Feedback focuses on correcting API access patterns by using the ai namespace, fixing environment-specific code (replacing Node.js APIs with browser-compatible ones), and ensuring correct property and method names for session management and capabilities.

gemini-code-assist · 2026-04-30T19:16:21Z

+Always check if the model is ready before creating a session:
+
+```javascript
+const availability = await LanguageModel.availability({


The Chrome built-in AI APIs are accessed via the window.ai namespace (e.g., ai.languageModel, ai.summarizer). Using the capitalized interface names like LanguageModel as global entry points is incorrect and will result in a ReferenceError. This pattern should be updated throughout the document for all APIs (Summarizer, Writer, etc.).

Suggested change

const availability = await LanguageModel.availability({

const availability = await ai.languageModel.availability({

References

Code examples in skill documentation should be minimal, demonstrating only the core SDK functionality. Avoid adding boilerplate like error handling, as the goal is to showcase SDK usage, not teach general coding practices.

This is outdated and wrong now.

gemini-code-assist · 2026-04-30T19:16:21Z

+### Summarizer API
+
+```javascript
+const summarizer = await Summarizer.create();


Specialized APIs should also be accessed via the ai namespace (e.g., ai.summarizer.create()) rather than using the interface name as a global.

Suggested change

const summarizer = await Summarizer.create();

const summarizer = await ai.summarizer.create();

References

Code examples in skill documentation should be minimal, demonstrating only the core SDK functionality. Avoid adding boilerplate like error handling, as the goal is to showcase SDK usage, not teach general coding practices.

Outdated and wrong now.

gemini-code-assist · 2026-04-30T19:16:21Z

+```javascript
+const stream = session.promptStreaming('Write a poem about the ocean.');
+for await (const chunk of stream) {
+  process.stdout.write(chunk);


process.stdout.write is a Node.js-specific API and is not available in the browser or Chrome Extension environments where these APIs are used. Use console.log or a DOM-based output method instead.

Suggested change

process.stdout.write(chunk);

console.log(chunk);

References

Code examples in skill documentation should be minimal, demonstrating only the core SDK functionality. Avoid adding boilerplate like error handling, as the goal is to showcase SDK usage, not teach general coding practices.

+1, this should just be console.log(chunk);.

gemini-code-assist · 2026-04-30T19:16:21Z

+### Context Window Tracking
+
+```javascript
+console.log(`Context usage: ${session.contextUsage}/${session.contextWindow}`);


The LanguageModel session object uses tokensSoFar and maxTokens to track context usage, rather than contextUsage and contextWindow.

Suggested change

console.log(`Context usage: ${session.contextUsage}/${session.contextWindow}`);

console.log("Context usage: " + session.tokensSoFar + "/" + session.maxTokens);

References

Code examples in skill documentation should be minimal, demonstrating only the core SDK functionality. Avoid adding boilerplate like error handling, as the goal is to showcase SDK usage, not teach general coding practices.

Outdated and wrong now.

gemini-code-assist · 2026-04-30T19:16:21Z

+All built-in AI APIs work in Chrome Extensions. For extensions using the Prompt API, you can customize model parameters:
+
+```javascript
+const params = await LanguageModel.params();


The method to retrieve model parameters and limits is capabilities(), not params(). Additionally, it should be called on the ai.languageModel factory.

Suggested change

const params = await LanguageModel.params();

const params = await ai.languageModel.capabilities();

References

Code examples in skill documentation should be minimal, demonstrating only the core SDK functionality. Avoid adding boilerplate like error handling, as the goal is to showcase SDK usage, not teach general coding practices.

Outdated and wrong now.

tomayac

A solid start, however, here's significant overlap with:

The task API skills are not detailed enough.

tomayac · 2026-05-08T08:13:42Z

+Always check if the model is ready before creating a session:
+
+```javascript
+const availability = await LanguageModel.availability({


This is outdated and wrong now.

tomayac · 2026-05-08T08:14:51Z

+```javascript
+const stream = session.promptStreaming('Write a poem about the ocean.');
+for await (const chunk of stream) {
+  process.stdout.write(chunk);


+1, this should just be console.log(chunk);.

tomayac · 2026-05-08T08:16:02Z

+### Context Window Tracking
+
+```javascript
+console.log(`Context usage: ${session.contextUsage}/${session.contextWindow}`);


Outdated and wrong now.

tomayac · 2026-05-08T08:16:29Z

+### Summarizer API
+
+```javascript
+const summarizer = await Summarizer.create();


Outdated and wrong now.

tomayac · 2026-05-08T08:16:52Z

+All built-in AI APIs work in Chrome Extensions. For extensions using the Prompt API, you can customize model parameters:
+
+```javascript
+const params = await LanguageModel.params();


Outdated and wrong now.

tomayac · 2026-05-08T08:17:16Z

+## Enable on Localhost
+
+1. Go to `chrome://flags/#optimization-guide-on-device-model` → **Enabled**
+2. Go to `chrome://flags/#prompt-api-for-gemini-nano` → **Enabled** or **Enabled multilingual**
+3. For multimodal input: `chrome://flags/#prompt-api-for-gemini-nano-multimodal-input` → **Enabled**
+4. Restart Chrome
+5. Verify: Open DevTools console, run `await LanguageModel.availability()`


Obsolete now that the API ships in Chrome 148.

tomayac · 2026-05-08T08:17:35Z

+
+## Best Practices
+
+1. **Always check availability** before creating a session — the model may not be downloaded yet


Yes, and with the exact same options you'll pass to create().

gemini-code-assist Bot reviewed Apr 30, 2026

View reviewed changes

tomayac reviewed May 8, 2026

View reviewed changes

	const availability = await LanguageModel.availability({
	const availability = await ai.languageModel.availability({

	const summarizer = await Summarizer.create();
	const summarizer = await ai.summarizer.create();

	console.log(`Context usage: ${session.contextUsage}/${session.contextWindow}`);
	console.log("Context usage: " + session.tokensSoFar + "/" + session.maxTokens);

	const params = await LanguageModel.params();
	const params = await ai.languageModel.capabilities();


		## Best Practices

		1. Always check availability before creating a session — the model may not be downloaded yet

Uh oh!

Conversation

fauzan171 commented Apr 30, 2026

Description

Changes

New: skills/gemini-nano-dev/SKILL.md

Modified: README.md

Testing

Related

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Apr 30, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tomayac left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

New: `skills/gemini-nano-dev/SKILL.md`

Modified: `README.md`